<template>
	<div class="tagList">
		<!-- 工具栏 -->
		<div class="toolbar">
			<el-button tag="addtag_btn" type="primary" size="small" @click="show_add">添加</el-button>
			<el-button tag="deltag_btn" type="primary" size="small" @click="all_del">批量删除</el-button>
			名称：
			<el-input label="关键字" type="text" placeholder="请输入标签名称" size="medium" v-model="search_tag_text"
				@keyup.native.enter="tag_name_input">
				<el-button slot="append" icon="el-icon-search" @click="search"></el-button>
			</el-input>
		</div>
		<!-- 数据列表 -->
		<el-table :data="list" stripe border ref="eltable" @selection-change="selectionChange">
			<el-table-column type="selection"></el-table-column>
			<el-table-column label="tagID" width="80" prop="tagID"></el-table-column>
			<el-table-column label="封面" width="80">
				<template slot-scope="scope">
					<el-image :src="scope.row.Cover" fit="fill" :lazy="true"></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="tagName" label="名称"  :show-overflow-tooltip="true"></el-table-column>
			<el-table-column label="操作" width="200">
				<template slot-scope="scope">
					<!-- <el-tooltip :content="'Switch value: ' + scope.row.active" placement="top"> -->
					<el-switch style="display: block" v-model="scope.row.active" active-color="#13ce66"
						inactive-color="#ff4949" active-text="启用" inactive-text="禁用" :active-value="1"
						:inactive-value="0" @change="active_change($event, scope.row)">
					</el-switch>
					<!-- </el-tooltip> -->
					<el-button type="primary" size="mini" @click="handleClick(scope.row)">修改</el-button>
					<el-popover placement="top" width="160" v-model="scope.row.delete_visible">
						<p>确定要删除吗？</p>
						<div style="text-align: right; margin: 0 ">
							<el-button size="mini" type="text" @click="scope.row.delete_visible = false">取消</el-button>
							<el-button type="primary" size="mini"
								@click="scope.row.delete_visible = false; handledelete(scope.row.tagID)">确定</el-button>
						</div>
						<el-button type="danger" size="mini" slot="reference">删除</el-button>
					</el-popover>
				</template>
			</el-table-column>
		</el-table>
		<!-- 编辑面板 -->

		<!-- 添加标签 -->
		<shs-ceshi :shs_title="shs_title" :dialogVisible_item="addtag_is_visible"
			@dialogVisible_item_change="dialogVisible_item_change" @list_change="list_change"
			:shs_coverUrl="shs_coverUrl" :tagID="tagID" item_name1="标签" :item_name1_con="item_name1_con"
			:shs_active="shs_active"></shs-ceshi>
		<!-- 分页 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page.sync="tag_currentPage" :page-size="page_size" layout="prev, pager, next, jumper"
			:pager-count="7" :total="total">
		</el-pagination>
	</div>
</template>

<script>
	/*导入获取标签*/
	import {
		getTags
	} from "@/request/api";
	/*导入删除标签 */
	import {
		deleteTags
	} from "@/request/api";
	/*导入更新标签 */
	import {
		updataTags
	} from "@/request/api";

	export default {
		name: "tagList",
		props: [],
		data() {
			return {
				dialogFormVisible: true,
				addtag_is_visible: false, //添加
				shs_title: "标签添加",
				item_name1_con: null, //名称属性值
				shs_active: 1, //是否启用
				shs_coverUrl: null, //编辑时的原图url
				select_list: [], //选择列表--批处理 selectionChange
				search_tag_text: "", //搜索 标签名称
				adminID: 0, //管理员id
				tagID: 0, //标签ID
				list: [], //分页数据
				total: 0, //标签总数
				page_size: 5, //每页最多5条数据
				tag_currentPage: 1, //当前页
				begin_index: 0, //当前索引
				table_list_sele: [],
				search_tagName_flag: true, //搜索防抖
			};
		},
		//挂载后
		mounted() {
			//添加adminID
			// window.localStorage.setItem("adminID", 110);
			this.adminID = JSON.parse(window.localStorage.getItem("adminID"));
			//初始化数据
			getTags()
				.then((data) => {
					if (data?.data.code == 200) {
						this.list = data?.data?.data.list;
						this.total = data?.data?.data.total;
						this.$message({
							message: data?.data?.msg,
							type: "success"
						});
					} else {
						this.$message({
							message: data?.data?.msg,
							type: "info"
						});
					}
				})
				.catch((err) => {
					console.log("err", err);
					this.list = null;
					this.total = 0;
					this.$message({
						message: err,
						type: "error"
					});
				});
		},
		methods: {
			//当前页改变时
			handleCurrentChange(val) {
				this.begin_index = (val - 1) * 5;
				this.search_tag();
			},
			//搜索、分页
			search_tag(a) {
				let obj = {
					begin_index: this.begin_index,
					tagName: this.search_tag_text,
					page_size: 5,
				};
				getTags(obj)
					.then((data) => {
						// let type = "error";
						// if (data?.data?.code == 200) {
						//   type = "success";
						// }
						// if (a != 1) {
						//   this.$notify({ message: data?.data?.msg, type: type, duration: 800 });
						// }
						this.list = data.data.data.list;
						this.total = data.data.data.total;
					})
					.catch((err) => {
						console.log("err", err);
						this.list = null;
						this.total = 0;
						if (a != 1) {
							this.$message({
								message: err,
								type: "error"
							});
						}
					});
			},
			//分页 每页的条数改变时
			handleSizeChange(val) {
				console.log("分页 每页的条数改变时", val);
			},
			//批量删除
			all_del() {
				let length = this.select_list.length; //执行的个数
				let _this = this;
				if (length == 0) {
					_this.$message({
						message: "请选择要处理的元素",
						type: "info"
					});
					return;
				}
				//提示 确认是否删除
				this.$confirm(`你确定要删除这${length}个元素吗？`)
					.then(() => {
						for (let i = 0; i < length; i++) {
							this.handledelete(_this.select_list[i].tagID);
						}
					})
					.catch(() => {
						_this.$message({
							message: "取消删除操作",
							type: "info"
						});
					});
			},
			//批处理，选择改变
			selectionChange(list) {
				console.log("list", list);
				this.select_list = list;
			},
			//是否启用改变
			active_change(val, row) {
				let _this = this;
				let obj = {
					tagID: row.tagID,
					tagName: row.tagName,
					active: row.active,
					Cover: row.Cover,
					userID: JSON.parse(localStorage.getItem('userinfo'))?.userID || 0
				}
				updataTags(
					obj
				).then(data => {
					if (data?.data.code == 200) {
						_this.$message({
							message: data.data.msg,
							type: "success"
						});
					} else if (data?.data.code == 5001) {
						_this.$message({
							message: data.data.msg,
							type: "warning"
						});
					} else {
						_this.$message({
							message: data.data.msg,
							type: "error"
						});
					}
				}).catch(err => {
					_this.$message({
						message: err,
						type: "error"
					});
				})
			},
			//添加显示
			show_add() {
				this.shs_title = "标签添加";
				this.addtag_is_visible = true;
				this.tagID = 0;
				this.shs_coverUrl = null; //编辑  原图 传递子组件
			},
			//在标签搜索框内按回车键进行 搜索
			tag_name_input() {
				this.search(); //调用搜索
			},
			//搜索对应的标签
			search() {
				let _this = this;
				//防抖
				if (this.search_tagName_flag) {
					this.search_tagName_flag = false;
					setTimeout(function() {
						_this.search_tagName_flag = true;
					}, 800);
					//初始化开始索引
					this.begin_index = 0;
					this.tag_currentPage = 1;
					this.search_tag();
				}
			},
			//字符转义
			characterEscape() {
				// let arr=null;
				// arr[0]=str.split('');
			},
			//字符解析转义

			//处理编辑
			handleClick(row) {
				//传递tagID
				this.shs_title = "标签编辑";
				this.addtag_is_visible = true;
				this.tagID = row.tagID;
				this.shs_coverUrl = row.Cover; //编辑  原图 传递子组件
				this.item_name1_con = row.tagName; //属性值
				this.shs_active = row.active; //传递是否启用参数
			},
			// 处理删除
			handledelete(tagId) {
				// for (let i = 0; i < this.list.length; i++) {
				//   if (tagId == this.list[i].tagID) {
				//     this.list.splice(i, 1);
				//   }
				// }
				//记录 id 执行

				let _this = this;
				let obj = {
					userID: JSON.parse(localStorage.getItem("userinfo"))?.userID || 0,
					tagID: tagId,
				};
				deleteTags(obj).then((data) => {
					if (data?.data.code == 200) {
						_this.$message({
							message: data.data.msg,
							type: 'success'
						});
						_this.search_tag(1);
					} else {
						_this.$message({
							message: data.data.msg,
							type: 'error'
						});
					}
				}).catch(err => {
					console.log(err);
				})
			},
			//弹框的显隐 改变事件
			dialogVisible_item_change(val) {
				this.addtag_is_visible = val;
			},
			//添加 数据的改变事件 重新赋值list
			list_change(val) {
				if (val.code == 200) {
					this.search_tag(1);
				}
			},
		},
		components: {
			shsCeshi: () => import("@/components/shs_upload_tag.vue"),
		},
	};
</script>

<style scoped>
	.toolbar {
		margin: 15px 0;
	}

	.addtag_btn {
		/* background-color:#fff000; */
		margin-right: 5px;
	}

	.el-input {
		width: 400px;
	}

	.el-table th.el-table__cell {
		text-align: center;
	}

	.form_old_name {
		width: 120px;
		height: 50px;
		background: #ff0000;
		position: relative;
	}

	/* 封面 */
	.cover_box {
		width: 200px;
		float: left;
	}

	/* 分页 */
	.el-pagination {
		margin: 30px;
		float: right;
	}
</style>